昨天介紹完

1. Let & Var & Const
2. String Template

很高興有邦友補充 var, let, const 背後 TDZ 機制
我自己也是受益良多XDD
補充：https://segmentfault.com/a/1190000008213835

今天繼續囉~
3. Arrow Function
4. Destructure assignment

Arrow Function => 讓函式更簡單

聽說是最受歡迎的ES6特性，有幾個優點：

• 語法簡單，省時省力
• 可以綁定 this
• 看起來比較厲害 ( 有嗎 ? )

先來個比較感受一下

//一般寫法

const add = function(a,b){
console.log(a+b);
}

以上可用來簡單add想要的值
那上面改成arrow function怎麼寫呢

//使用Arrow function

const arrowadd = (a,b) => a + b

結果相同，Arrow function一行!!

這邊還有兩點小補充：

1. 如果是只有一個變數，不一定要括弧

   const print = name => console.log(name);
   output => David
   

2. { } 其實有意義，當function有多行就要用，但如果只有單一傳入參數可以不需要哦 ~

   const print = num => num+10
   const print2 = num => { num+10 } 
   

請先測試看看是否兩個會得到一樣的結果

答案是 X

• 因為沒用 { } 時，會自動有return的功能，就像我第一個a+b
• 可是當有 { } 時，他就會將return功能取消以免搞混

Arrow function 綁定 this

不僅僅可以縮寫原本的函式，還有什麼其他的功能呢?
取代原有使用var self = this 或 .bind方法

讓我們來看個範例
假設有一個人

• 名字叫做：I ( 我 )
• 有些 Hobbies：吃、玩、睡
• 有個屬性可以印出名字
• 有個屬性可以說我愛吃、玩、睡

const person = {
name:'I',
hobbies:['eat','play','sleep'],
printname:function(){
    console.log(this.name);
   },
printhobbies:function(){
   return this.hobbies.map(function(hobby){
        return `${this.name} likes to ${hobby}` 
      });
   }
}

• printname的function很清楚直接印名字是沒問題的，因為這個this可以直接直到person
• printhobbies就有問題了，因為在 function 中的 function，JS 可能會把他搞丟

那我們印印看吧

person.printname();
output==> I

person.printhobbies();
output==>["likes to eat","likes to play","likes to sleep"]

如圖：

這時候過去有兩種方法可以解決

• 法1 : 用一個self撈this

  printhobbies:function(){
     const self = this;
     return this.hobbies.map(function(hobby){
          return `${self.name} likes to ${hobby}` 
        });
  

  我們把上面的this抓下來帶到self，在讓裡面return self 的 name
• 法2 : 使用bind( )
  Definition：bind會建立一新函式，被呼叫時會將 this 設為給定的參數，並在呼叫時帶有提供之前給定順序的參數。
  因此我們可以在這綁定this，對prithobbies做.bind ( this )

- - - - 總之以上兩種方法在這邊都不太重要 - - - -

• 法3 : 使用Arrow function !
  因為用arrow function裡面的this仍然會綁定person

  const person = {
  name:'I',
  hobbies:['eat ',' play ',' sleep'],
  printname:function(){
      return this.name;
     },
  printhobbies:function(){
     return this.hobbies.map((hobby) =>{
          return ` ${this.name} likes to ${hobby}`
        });
     }
  }
  

如圖：

Destructure assignment

Definition：宣告變數的時候，從物件/陣列，直接把宣告的變數抽出來

先想想平常怎麼抽

const person ={
name:'David',
age:20,
gender:'male'
};

const name = person.name;
const age = person.age;
const gender = person.gender;

console.log ( name.age.gender );
output => David 20 male

這會有什麼問題嗎 ? 沒有，只是麻煩
因為每個都要分別在宣告取出

那我們來看看ES6提供的方法

const person ={
name:'David',
age:20,
gender:'male'
};

const { age,name,gender } = person;

console.log(name.age.gender);

簡直太方便了阿，連複製貼上都可以少按了!
除此之外，呼叫裡面的順序也不用管哦 ( 有發現我的age、name反過來了嗎? )

想再多看些嗎? 再來一個變數也可以!

Original ：

const people = ['David','Dy','Kc'];

const person = people[0];
const person1 = people[1];
const person2 = people[2];

console.log(person,person1,person2);

output => David Dy Kc

Destructure assignment：

const people = ['David','Dy','Kc'];

const[person1,person2,person3]=people;
console.log(person1,person2,person3);

output => David Dy Kc

還有呢 ? 函式也來一下 !

const person ={
name:'David',
age:20,
gender:'male'
};

function printname({name}){
console.log(name);
}

printname(person);

output==>David

是不是很容易呢!!

最後檢視今天學了什麼

• Arrow function 簡化函式
• Arrow function 綁定this
• Destructure assignment 抽出

下課囉 ~ 請鎖定 柚子放學後的網頁生活